<template>
  <router-view />
</template>

<script setup>
import useSettingsStore from '@/store/modules/settings'
import { useColorMode, useCycleList, useToggle } from '@vueuse/core';
import { onMounted ,nextTick} from "vue";
const isColor = useColorMode({
  emitAuto: true,
  modes: {
    blue: 'crdigital-blue',
    yellow: 'crc-yellow',
  },
  storageKey: 'el-theme-appearance',
  writeDefaults: true,
});

const cycleColor = useCycleList(['yellow', 'blue'], {
  initialValue: isColor,
});

function updateTheme(color, dark) {
 
  isColor.value = color;
  cycleColor.next();
}
onMounted(() => {
  // 使用matchMedia API检测屏幕宽度
  let device = 'pc'
  if (window.matchMedia("(pointer: coarse)").matches) {
      // 平板或手机
      device =  window.matchMedia("(min-width: 768px)").matches ? "tablet" : "mobile";
  } else {
      // PC
      device = "pc";
  };
  localStorage.setItem("device", device);
  nextTick(() => {
    // 初始化主题样式
    updateTheme('yellow')
  })
})
</script>
